<template>
  <div v-loading="showLoading">
    <div>
      <div class="fx">
        <div class="block f5bg">
          <div class="block-left">公司名称：</div>
          <div
            class="block-right"
            v-htmlNo="{ action: basicInfo.enterpriseName }"
          ></div>
        </div>
        <div class="block f5bg">
          <div class="block-left">当前法人姓名：</div>
          <div
            class="block-right"
            v-htmlNo="{ action: basicInfo.legalPerson }"
          ></div>
        </div>
      </div>
      <div class="fx">
        <div class="block">
          <div class="block-left">统一信用代码：</div>
          <div
            class="block-right"
            v-htmlNo="{ action: basicInfo.creditCode }"
          ></div>
        </div>
        <div class="block">
          <div class="block-left">法人年龄(岁)：</div>
          <div class="block-right" v-htmlNo="{ action: basicInfo.age }"></div>
        </div>
      </div>
      <div class="fx">
        <div class="block f5bg">
          <div class="block-left">税务密码：</div>
          <div
            class="block-right"
            v-htmlNo="{ action: basicInfo.password }"
          ></div>
        </div>
        <div class="block f5bg">
          <div class="block-left">联系方式：</div>
          <div class="block-right" v-htmlNo="{ action: basicInfo.phone }"></div>
        </div>
      </div>
      <div class="fx">
        <div class="block">
          <div class="block-left">成立日期：</div>
          <div
            class="block-right"
            v-htmlNo="{ action: basicInfo.registerDate }"
          ></div>
        </div>
        <div class="block">
          <div class="block-left">法人是否占股：</div>
          <div
            class="block-right"
            v-htmlNo="{ action: `${basicInfo.stockStatus ? '是' : '否'}` }"
          ></div>
        </div>
      </div>
      <div class="fx">
        <div class="block f5bg">
          <div class="block-left">成立时长：</div>
          <div
            class="block-right"
            v-htmlNo="{ action: basicInfo.registerMonth, unit: '个月' }"
          ></div>
        </div>
        <div class="block f5bg">
          <div class="block-left">法人股份占比：</div>
          <div
            class="block-right"
            v-htmlNo="{ action: basicInfo.stockPercent, unit: '%' }"
          ></div>
        </div>
      </div>
      <div class="fx">
        <div class="block">
          <div class="block-left">所属行业：</div>
          <div
            class="block-right"
            v-htmlNo="{ action: basicInfo.industry }"
          ></div>
        </div>
        <div class="block">
          <div class="block-left">注册类型：</div>
          <div
            class="block-right"
            v-htmlNo="{ action: basicInfo.loginRegisterType }"
          ></div>
        </div>
      </div>
      <div class="fx">
        <div class="block f5bg">
          <div
            class="block-left"
            style="margin-right: 8px"
            v-htmlNo="{
              action: `${
                basicInfo.enterpriseChange
                  ? basicInfo.enterpriseChange.name
                  : '法人变更'
              }  : `
            }"
          ></div>
          <div
            class="block-right"
            v-htmlNo="{
              action: `变更前： ${
                basicInfo.enterpriseChange
                  ? basicInfo.enterpriseChange.beforeContent
                  : '-'
              }`
            }"
          ></div>
        </div>
        <div class="block f5bg">
          <div class="block-left">注册区域：</div>
          <div
            class="block-right"
            v-htmlNo="{ action: basicInfo.registerAddress }"
          ></div>
        </div>
      </div>
      <div class="fx">
        <div class="block">
          <div class="block-left"></div>
          <div
            class="block-right"
            v-htmlNo="{
              action: `变更后：${
                basicInfo.enterpriseChange
                  ? basicInfo.enterpriseChange.affterContent
                  : '-'
              }`
            }"
          ></div>
        </div>
        <div class="block">
          <div class="block-left">银税互动授权记录：</div>
          <div
            class="block-right"
            v-htmlNo="{ action: basicInfo.bankTaxRecord }"
          ></div>
        </div>
      </div>
    </div>
    <div class="canpanyer-box" style="margin-top: 20px">
      <el-table :data="basicInfo.qccEnterpriseChangeList" border>
        <el-table-column align="center" prop="name" label="变更类型">
        </el-table-column>
        <el-table-column align="center" prop="changeDate" label="变更时间">
        </el-table-column>
        <el-table-column align="center" prop="beforeContent" label="变更前">
        </el-table-column>
        <el-table-column align="center" prop="affterContent" label="变更后">
        </el-table-column>
      </el-table>
    </div>
    <div class="canpanyer-box" style="margin-top: 20px">
      <div class="title-msg">
        股东明细
      </div>

      <div style="margin-top: 20px">
        <el-table :data="basicInfo.qccEnterprisePartnersList" border>
          <el-table-column align="center" prop="stockName" label="股东名称">
          </el-table-column>
          <el-table-column align="center" prop="type" label="股东类型">
            <template slot-scope="scope" v-htmlNo="scope.row.stockType">
              {{ scope.row.stockType }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="money" label="参股数额">
            <template slot-scope="scope" v-htmlNo="scope.row.shouldCapi">
              {{ scope.row.shouldCapi }}万
            </template>
          </el-table-column>
          <el-table-column align="center" prop="bl" label="参股比例">
            <template slot-scope="scope" v-htmlNo="scope.row.stockPercent">
              {{ scope.row.stockPercent }}%
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="canpanyer-box" style="margin-top: 20px">
      <div class="title-msg">
        经营范围
      </div>
      <div
        style="padding: 10px; margin-top: 20px"
        class="f5bg"
        v-htmlNo="{ action: basicInfo.businessScope }"
      ></div>
    </div>
  </div>
</template>
<script>
import { getReportDetail } from "@/api/report";
export default {
  name: "basicInfo",
  props: {
    detailInfo: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      basicInfo: {},
      showLoading: false
    };
  },
  created() {
    this.getCmsMatchDetailInfo();
  },
  methods: {
    getCmsMatchDetailInfo() {
      this.showLoading = true;
      let params = {
        enterpriseId: this.detailInfo.enterpriseId,
        createTime: this.detailInfo.createTime
      };
      console.log(params);
      getReportDetail(params)
        .then(res => {
          this.showLoading = false;
          this.basicInfo = res.data;
        })
        .finally(() => {
          this.$emit("loading", false);
        });
    }
  }
};
</script>

<style scoped lang="scss">
.f5bg {
  background: #f5f5f5;
}
.fx {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  .block {
    width: 48%;
    display: flex;
    align-items: center;
    min-height: 60px;
    padding: 18px 0;

    //line-height: 56px;
    .block-left {
      display: inline-block;
      //display: flex;
      text-align: right;
      width: 50%;
      white-space: wrap;
      color: #999;
    }
    .block-right {
      display: inline-block;
      //display: flex;
      line-height: 18px;
      color: #222;
      width: 50%;
    }
  }
}
.title-msg {
  font-size: 18px;
  font-weight: 500;
  color: #222222;
}
</style>
